<template>
  <div class="home-container" v-loading="loading" ref="container" @wheel.passive="handleWheel">
    <ul
      class="carousel-container"
      :style="{
        marginTop
      }"
      @transitionend="handleTransitionEnd"
    >
      <li v-for="item in data" :key="item.id">
        <CarouselItem :carousel="item" @touchstart="handleTouchStart" @touchend="handleTouchEnd" />
      </li>
    </ul>
    <div v-show="index >= 1" @cliwck="switchTo(index - 1)" class="icon icon-up">
      <Icon type="arrowUp" />
    </div>
    <div v-show="index < data.length - 1" @click="switchTo(index + 1)" class="icon icon-down">
      <Icon type="arrowDown" />
    </div>
    <ul class="indicator">
      <li
        :class="{
          active: i === index
        }"
        v-for="(item, i) in data"
        :key="item.id"
        @click="switchTo(i)"
      ></li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed, getCurrentInstance, onUnmounted, type ComponentPublicInstance } from 'vue'
import CarouselItem from './CarouselItem.vue'
const proxy: ComponentPublicInstance<any> = getCurrentInstance()?.proxy
import { useBannerStore } from '@/stores/useBannerStore'
// import { storeToRefs } from 'pinia'
const store = useBannerStore()
// const { chooseActive: data, loading } = storeToRefs(store)
const { fetchBanner } = store
const index = ref(0) // 当前显示的是第几张轮播图
const containerHeight = ref(0) // 整个容器的高度
const switching = ref(false) //是否正在滚动
const startY = ref(0)
const loading = ref(false)
const data = ref<any>([])
onMounted(async () => {
  loading.value = true
  data.value = await fetchBanner()
  loading.value = false
  containerHeight.value = proxy.$refs.container.clientHeight
  handleResize()
  window.addEventListener('resize', handleResize)
})
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
const marginTop = computed(() => {
  return -index.value * containerHeight.value + 'px'
})

// 切换轮播图
function switchTo(i: number) {
  index.value = i
}
//鼠标滚动
function handleWheel(e: any) {
  if (switching.value) {
    return
  }
  if (e.deltaY < -5 && index.value > 0) {
    // 往上滚动
    switching.value = true
    index.value--
  } else if (e.deltaY > 5 && index.value < data.value.length - 1) {
    // 往下滚动
    switching.value = true
    index.value++
  }
}
//动画结束表示不在滚动中
function handleTransitionEnd() {
  switching.value = false
}
//监听页面尺寸变化
function handleResize() {
  containerHeight.value = proxy.$refs.container.clientHeight
}
function handleTouchStart(event: TouchEvent) {
  startY.value = event.targetTouches[0].clientY
}
function handleTouchEnd(event: TouchEvent) {
  const endY = event.changedTouches[0].clientY
  if (endY - startY.value > 0 && index.value >= 1) {
    switchTo(index.value - 1)
  } else if (endY - startY.value <= 0 && index.value < data.value.length - 1) {
    switchTo(index.value + 1)
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixin';
@import '@/styles/var';

.home-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  ul {
    margin: 0;
    list-style: none;
    padding: 0;
  }
}

.carousel-container {
  width: 100%;
  height: 100%;
  transition: 500ms;

  li {
    width: 100%;
    height: 100%;
  }
}

.icon {
  @include self-center();
  font-size: 30px;
  $gap: 25px;
  color: skyblue;
  cursor: pointer;
  transform: translateX(-50%);

  &.icon-up {
    top: $gap;
    animation: jump-up 2s infinite;

    @media screen and (max-width: 992px) {
      display: none;
    }
  }

  &.icon-down {
    top: auto;
    bottom: $gap;
    animation: jump-down 2s infinite;

    @media screen and (max-width: 992px) {
      display: none;
    }
  }

  $jump: 5px;

  @keyframes jump-up {
    0% {
      transform: translate(-50%, $jump);
    }

    50% {
      transform: translate(-50%, -$jump);
    }

    100% {
      transform: translate(-50%, $jump);
    }
  }

  @keyframes jump-down {
    0% {
      transform: translate(-50%, -$jump);
    }

    50% {
      transform: translate(-50%, $jump);
    }

    100% {
      transform: translate(-50%, -$jump);
    }
  }
}

.indicator {
  @include self-center();
  transform: translateY(-50%);
  left: auto;

  right: 20px;

  li {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: $words;
    cursor: pointer;
    margin-bottom: 10px;
    border: 1px solid #fff;
    box-sizing: border-box;

    &.active {
      background: #fff;
    }
  }
}
</style>
